<template>
  <div>
    <Button type="primary" @click="modal1 = true"><Icon type="md-add" />新增产品</Button>&nbsp;&nbsp;
    <Button type="primary" @click="init"><Icon type="ios-search" size="16"/></Button>
    <Table border :columns="tableCol" :data="tableData">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看所以版本</Button>
        <Button type="error" size="small" @click="remove(row)">删除</Button>
      </template>
    </Table>
    <template>
      <Modal
        v-model="modal1"
        footer-hide="footer-hide"
        title="新增产品">
        <template>
          <Form ref="form" :model="form" :label-width="100" label-position="right" :rules="ruleInline">
            <FormItem prop="prodName" label="产品标识">
              <Input type="text" v-model="form.prodName" placeholder="产品标识">
              </Input>
            </FormItem>
            <FormItem prop="displayName" label="产品名称">
              <Input type="text" v-model="form.displayName" placeholder="产品名称">
              </Input>
            </FormItem>
            <FormItem prop="latestVersion" label="当前版本">
              <Input type="text" v-model="form.latestVersion" placeholder="当前版本">
              </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="createData()">Signin</Button>
            </FormItem>
          </Form>
        </template>
      </Modal>
    </template>

  </div>
</template>
<script>
import axios from 'axios'
import { formatDate } from '@/libs/tools'
export default {
  name: 'level_2_1',
  data () {
    return {
      form: {
        prodName: '',
        displayName: '',
        latestVersion: '',
        spanVersion: ''
      },
      ruleInline: {
        prodName: [
          { required: true, message: '必输', trigger: 'blur' }
        ],
        displayName: [
          { required: true, message: '必输.', trigger: 'blur' },
          { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
        ],
        latestVersion: [
          { required: true, message: '必输.', trigger: 'blur' }
        ]
      },
      tableCol: [
        {
          title: '产品标识',
          key: 'prodName'
        },
        {
          title: '产品名称',
          key: 'displayName'
        },
        {
          title: '最新版本',
          key: 'latestVersion'
        },
        {
          title: '上一个版本',
          key: 'lastVersion'
        },
        {
          title: '发布时间',
          key: 'releaseTime',
          render: (h, params) => {
            return h('div', formatDate(new Date(params.row.releaseTime), 'yyyy-MM-dd hh:mm:ss'))
          }
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],
      tableData: [],
      modal1: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      var mgr = this
      axios.get('/api/products/queryAll?name=&version')
        .then(function (response) {
          mgr.tableData = response.data
        })
        .catch(function (error) {
          console.error(error)
        })
    },
    show (index) {
      debugger
    },
    remove (row) {
      var mgr = this
      axios.delete('/api/products/delete/' + row.prodId)
        .then(function (ret) {
          mgr.init()
          mgr.$Message.success('操作成功')
        })
        .catch(err => {
          console.error(err)
          mgr.$Message.error('操作失败')
        })
    },
    handleSubmit () {
      this.$Message.info('Clicked ok')
    },
    handleUpload (file) {
      this.form.productsFile = file
      return false
    },
    handleUpload1 (file) {
      this.form.scriptFile = file
      return false
    },
    createData () {
      var mgr = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          axios.post('/api/products/create', this.form)
            .then(function (response) {
              mgr.$Message.success('创建成功')
              mgr.init()
            })
            .catch(function (error) {
              console.error(error)
            })
        } else {
          this.$Message.error('请输入必输项')
        }
      })
    }
  }
}
</script>
